<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格综合案例</title>
</head>
<body>
<!--
表行或列进行和并时，需要用到两个属性
<table>
<tr>
    <td colspan="2"></td>  [cols=2 表示第一行的两列合并成一列]

</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>
<table>
    <tr>
        <td rowspan="2"></td>  [rows=2 表示第一行的第一列和第二行的第一列合并到一起]
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
-->
<table border="1" width="400px" cellspacing="0px;" style="border-color:#ff00ff;line-height:40px;margin:0 auto;text-align: center">
    <caption>这是一个最新的菜谱</caption>
    <tbody>
    <tr>
        <td colspan="3">菜谱</td>
    </tr>
    <tr>
        <td rowspan="2">素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>草白菜</td>
    </tr>
    <tr>
        <td rowspan="2">荤菜</td>
        <td>友盟打下</td>
        <td>还生于此</td>
    </tr>
    <tr>
        <td>
            红扫肉
            <img src="hongshaorou.jpg" alt="红烧肉" title="红烧肉" width="200px;">
        </td>
        <td>烤全羊</td>
    </tr>
    </tbody>
</table>
</body>
</html>